<template>
  <view class="videoBox" :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="videoContent">
      <view class="title" v-if="propsData.params.useTitle == 1" @click="more">
        <moduleHeader
          :propsData="propsData"
          :moduleName="moduleName"
          :showMore="propsData.params.type === 2"
        ></moduleHeader>
      </view>
      <view class="video" @click="goUrl">
        <video
          :poster="propsData.params.picUrl"
          :src="propsData.params.videoUrl"
        ></video>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";
import moduleHeader from "../components/moduleHeader/index.vue";
export default {
  name: "diyVideo",
  components: {
    moduleHeader,
  },
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [diyMixin],

  computed: {
    moduleName() {
      return this.propsData.params.text;
    },
  },
  methods: {
    goUrl() {
      let { itemId, type } = this.propsData.params;
      if (type === 2) {
        this.$utils.toUrl(`/videoGoods/videoDetails/index?id=${itemId}`);
      }
    },
    more() {
      if (this.propsData.params.type === 2) {
        this.$utils.toUrl("/videoGoods/list/index");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.videoBox {
  width: 100%;
  padding: 24rpx;
  border-radius: 10rpx;
  position: relative;
  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
  .videoContent {
    padding: 24rpx;
  }
  .title {
    width: 100%;
    margin-bottom: 24rpx;
    .name {
      font-size: 32rpx;
      font-weight: 600;
    }
    .more {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #888;
      i {
        font-size: 20rpx;
      }
    }
  }
  .video {
    width: 100%;
    height: 350rpx;
    border-radius: 10rpx;
    overflow: hidden;
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
